import { useEffect } from "react";
import { message, Popconfirm, Table, Tag } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import { useApplication } from "../../hooks/application/organization";

const { Column } = Table;

const OnShelfApplications = () => {
    const { windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { appLoading, loadApplicationByShelfStatus, applications, stateColor } = useApplication();
    const { submitLoading, updateApplicationShelfState } = useApplication();

    const state = useReactive({
        loading: false,
        submitLoading: false,
        applications: [],
        selectedApplication: [],
        reviewers: [],
        selectedReviewer: null,
        appliedApplications: [],
        members: [],
    });

    const loadData = async () => {
        await loadApplicationByShelfStatus("已下架");
    };

    useEffect(() => {
        loadData();
    }, [state.page]);

    const changeAppShelfState = async (record) => {
        updateApplicationShelfState([record.aiUuid], "已上架", (res) => {
            if (res) {
                message.success("上架成功！");
                loadData();
            }
        });
    };

    const RenderIsFree = (_) => {
        return _ ? "免费" : "收费";
    };

    const RenderIsOpen = (_) => {
        return _ ? "公开" : "私有";
    };

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16 }}>已下架应用列表</span>}
                headerExtraContent={
                    <ButtonGroup size={"default"}>
                        <Button icon={<IconRefresh />} onClick={loadData}></Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={appLoading} size="small" dataSource={applications} rowKey="aiUuid" bordered pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="应用名称" dataIndex="aiName" align="left" />
                    <Column title="应用分类" dataIndex="aiClas" align="left" />
                    <Column title="适用对象" dataIndex="aiObje" align="left" />
                    <Column title="所属角色" dataIndex="aiRole" align="left" />
                    <Column title="是否免费" dataIndex="isFree" width={120} align="center" render={RenderIsFree} />
                    <Column title="是否公开" dataIndex="isOpen" width={120} align="center" render={RenderIsOpen} />
                    <Column title="结算价格" dataIndex="aiSdpr" width={120} align="right" render={(_) => helper.numberFormat(_, 2)} />
                    <Column
                        title="上下架状态"
                        dataIndex="aiStat"
                        width={140}
                        align="center"
                        render={(_, r) => (
                            <Popconfirm
                                title={`确认要上架【${r.aiName}】?`}
                                placement="topRight"
                                okButtonProps={{ loading: submitLoading }}
                                onConfirm={(e) => {
                                    e.stopPropagation();
                                    changeAppShelfState(r);
                                }}
                                onCancel={(e) => e.stopPropagation()}
                            >
                                <Tag color={stateColor[_]}>{_}</Tag>
                            </Popconfirm>
                        )}
                    />
                    {/* <Column title="下架时间" dataIndex="aiPuti" width={160} align="center" render={(_) => UTCTimeToLocal(_)} /> */}
                </Table>
            </SemiCard>
        </div>
    );
};

export default OnShelfApplications;
